<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        //定义一个组件
        class MyComponent extends React.Component{
            //初始化一个开关状态
            constructor(props){
                super(props)
                this.state = {isToggleOn: true};
                this.MyClick = this.MyClick.bind(this);
            }
            MyClick(){
                this.setState((pre)=>({
                    isToggleOn:!pre.isToggleOn
                }));
            }
            render(){
                return(
                    <button type="buttn" onClick={this.MyClick}>{this.state.isToggleOn?"no":"off"}</button>
                )
            }
        }

        ReactDOM.render(
            <MyComponent/>
            ,document.getElementById("app")
        )
    </script>
</body>
</html>